<template>
  <div class="content-left-wrap">
    <Card>
      <div slot="title">
        <left-top />
      </div>
      <div class="table-wrap">
        <SimpleTable
          :tableColums="tableColums"
          :tableData="tableData"
          :tableLoading="tableLoading"
          :pageSize="getTablePageParams.pageSize"
          :pageNum="getTablePageParams.pageNum"
          @handleRefresh="handleRefresh"
          @handleChangePage="handleChangePage"
          @hanleRowClick="hanleRowClick"
          :keyUp="true"
          :stopKeyUp="stopTableKeyUp"
        />
      </div>
    </Card>
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
import SimpleTable from '@/commons/SimpleTable'
import LeftTop from '../LeftTop'
import tableColums from './tableColums'

const { mapActions, mapGetters, mapState } = createNamespacedHelpers('microGas')

export default {
  name: 'micro-gas-left',
  components: {
    LeftTop,
    SimpleTable
  },
  computed: {
    ...mapGetters(['getTablePageParams']),
    ...mapState(['tableData', 'tableLoading', 'stopTableKeyUp', 'currentMeterId', 'currentGasCls', 'userQueryParams']),
    tableColums() {
      return tableColums
    }
  },
  mounted() {
    this.loadTableData()
  },
  methods: {
    ...mapActions([
      'loadTableData',
      'changeTablePageNum',
      'changeCurrentMeterId',
      'changeStopTableKeyUp',
      'changeCurrentGasCls'
    ]),
    /**
     * desc: 点击表格重置按钮
     * param {type}
     * return {type} void
     */
    handleRefresh() {
      this.changeCurrentGasCls()
      this.changeTablePageNum(1)
      this.loadTableData()
    },
    /**
     * desc: 点击表格分页
     * param {type}
     * return {type} void
     */
    handleChangePage(num) {
      this.changeTablePageNum(num)
      this.loadTableData({
        meterGasClass: this.currentGasCls,
        ...this.userQueryParams
      })
    },
    /**
     * desc: 表格行点击
     * param {type}
     * return {type} void
     */
    hanleRowClick(row = {}, index) {
      const { meterId } = row
      if (this.currentMeterId !== meterId) {
        this.changeCurrentMeterId(meterId)
        this.changeStopTableKeyUp(false)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.content-left-wrap {
  width: 100%;
  height: 100%;

  .table-wrap {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>
